<template>
  <el-card class="btabox-card" :body-style="{padding:'20px 0'}">
    <el-button class="addBtn" type="primary" round @click="$emit('add')"> 新增仓库</el-button>
    <!---->
    <!-- 表格区域 -->
    <!-- 仓库管理 -->
    <div v-if="$router.history.current.meta.title==='仓库管理'">
      <el-table
        :data="warehouseInfo"
        border
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :row-style="{height: '44px'}"
        :cell-style="{padding: '0'}"
      >
        <el-table-column :label="tabHeaderinfo.idx" width="68" type="index" align="center" />
        <el-table-column prop="code" :label="tabHeaderinfo.id" width="150" align="center" />
        <el-table-column prop="name" :label="tabHeaderinfo.name" width="150" align="center" />
        <el-table-column prop="type" :label="tabHeaderinfo.type" width="150" align="center">
          <template #default="scope">
            {{ setType(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="location" :label="tabHeaderinfo.home" width="150" align="center" />
        <el-table-column prop="address" :label="tabHeaderinfo.detailed" width="150" align="center" />
        <el-table-column prop="status" :label="tabHeaderinfo.state" width="200" align="center">
          <template #default="scope">
            {{ scope.row.status===1?'启用':'停用' }}
          </template>
        </el-table-column>
        <el-table-column prop="surface" :label="tabHeaderinfo.area" width="150" align="center" />
        <el-table-column prop="includedNum" :label="tabHeaderinfo.num" width="150" align="center" />
        <el-table-column prop="personName" :label="tabHeaderinfo.hear" width="150" align="center" />
        <el-table-column prop="phone" :label="tabHeaderinfo.phone" width="150" align="center" />
        <el-table-column prop="updateTime" :label="tabHeaderinfo.upTime" width="200" align="center" />
        <el-table-column prop="date" :label="tabHeaderinfo.operate" fixed="right" width="180" align="center">
          <template #default="scoped">
            <el-button type="text" size="small" @click="$emit('eidt',scoped.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="$emit('stop',scoped.row)">{{ scoped.row.status===1?'启用':'停用' }}</el-button>
            <el-button type="text" size="small" @click="$emit('del',scoped.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-left:50% ;margin-top: 20px; transform: translateX(-50%); "
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="+params.size"
        :total="+pageAll.pageSize"
        :page-count="+pageAll.pageCount"
        :current-page="+params.current"
        hide-on-single-page
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 库区管理 -->
    <div v-if="$router.history.current.meta.title === '库区管理'">
      <el-table
        :data="warehouseInfo"
        border
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :row-style="{height: '44px'}"
        :cell-style="{padding: '0'}"
      >
        <el-table-column :label="tabHeaderinfo.idx" width="68" type="index" align="center" />
        <el-table-column prop="warehouseName" :label="tabHeaderinfo.belongs" width="150" align="center" />
        <el-table-column prop="code" :label="tabHeaderinfo.id" width="150" align="center" />
        <el-table-column prop="name" :label="tabHeaderinfo.name" width="150" align="center" />
        <el-table-column prop="temperatureType" :label="tabHeaderinfo.temperature" width="150" align="center">
          <template #default="scope">
            {{ temperature[scope.row.temperatureType] }}
          </template>
        </el-table-column>
        <el-table-column prop="bearingType" :label="tabHeaderinfo.bearing" width="150" align="center">
          <template #default="scope">
            {{ bearing[scope.row.bearingType] }}
          </template>
        </el-table-column>
        <el-table-column prop="useType" :label="tabHeaderinfo.use" width="150" align="center">
          <template #default="scope">
            {{ use[scope.row.useType] }}
          </template>
        </el-table-column>
        <el-table-column prop="status" :label="tabHeaderinfo.type" width="200" align="center">
          <template #default="scope">
            {{ scope.row .status===1?'启用':'停用' }}
          </template>
        </el-table-column>
        <el-table-column prop="personName" :label="tabHeaderinfo.hear" width="150" align="center" />
        <el-table-column prop="phone" :label="tabHeaderinfo.phone" width="150" align="center" />
        <el-table-column prop="includedNum" :label="tabHeaderinfo.num" width="150" align="center" />
        <el-table-column prop="updateTime" :label="tabHeaderinfo.upTime" width="200" align="center" />
        <el-table-column prop="date" :label="tabHeaderinfo.operate" fixed="right" width="180" align="center">
          <template #default="scoped">
            <el-button type="text" size="small" @click="$emit('eidt',scoped.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="$emit('stop',scoped.row)">{{ scoped.row.status===1?'启用':'停用' }}</el-button>
            <el-button type="text" size="small" @click="$emit('del',scoped.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-left:50% ;margin-top: 20px; transform: translateX(-50%); "
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="+params.size"
        :total="+pageAll.pageSize"
        :page-count="+pageAll.pageCount"
        :current-page="+params.current"
        hide-on-single-page
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    // 用途类型
    use: {
      type: Object,
      default: () => {}
    },
    // 承重类型
    bearing: {
      type: Object,
      default: () => {}
    },
    // 温度类型
    temperature: {
      type: Object,
      default: () => {}
    },
    // 保存表格头部类型
    tabHeaderinfo: {
      type: Object,
      default: () => {}
    },
    // 仓库类型
    warehouseType: {
      type: Object,
      default: () => {}
    },
    // 设置初始页码值
    params: {
      type: Object,
      default: () => {}
    },
    // 保存获取到的页码值
    pageAll: {
      type: Object,
      default: () => {}
    },
    // 保存tab栏数据
    warehouseInfo: {
      type: Array,
      default: () => {}
    },
    status: {
      type: Array,
      default: () => {}
    }
  },
  methods: {
    // 仓储类型
    setType(val) {
      return this.warehouseType[val]
    },
    // 控制表单隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex % 2) {
        return 'success-row'
      }
      return ''
    },
    // 页码信息
    handleCurrentChange(val) {
      this.params.current = val
      this.$emit('getPageInfo')
    }
  }

}
</script>

<style lang="scss" scoped>
 //底部卡片内容区域
  .btabox-card{
    margin: 0 30px;
    border-radius: 10px;
    .addBtn{
      background-color: #55bb7c;
      border: 1px solid #55bb7c;
      margin-bottom: 20px;
      margin-left: 30px;
      &:hover{
        background-color: #347850;
        border: 1px solid #347850;
      }
    }
  }
 ::v-deep .el-table .warning-row {
  background: #fdfcf9;
    }
 ::v-deep .el-table .success-row {
      background: #fdfcf9;
      height: 44px !important;
      line-height: 44px;
    }
  ::v-deep .is-leaf{
    background-color: #f8f6ef;
  }
</style>

